<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
    <div class="h-screen flex">
      <!-- 左侧领域菜单 -->
      <DomainMenu 
        :domains="domains" 
        :selected-domain="selectedDomain" 
        :left-nav="leftNav"
        @update:selected-domain="selectDomain" 
        @update:left-nav="leftNav = $event" 
      />

      <!-- 中间题目详情区域 -->
      <TopicDetail 
        :topic="selectedTopic" 
        :loading="loading" 
        :current-index="currentTopicIndex"
        :total-count="filteredTopics.length"
        @previous-topic="goToPreviousTopic"
        @next-topic="goToNextTopic"
      />

      <!-- 右侧题目列表 -->
      <TopicList 
        :topics="filteredTopics" 
        :selected-topic="selectedTopic" 
        :right-nav="rightNav"
        @update:selected-topic="selectTopic" 
        @update:right-nav="rightNav = $event" 
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import DomainMenu from './components/DomainMenu.vue'
import TopicDetail from './components/TopicDetail.vue'
import TopicList from './components/TopicList.vue'
import { useTopics } from './composables/useTopics'
import type { ReviewStatus } from '~/types/topic.d.ts'

definePageMeta({
  middleware: 'auth'
})

const {
  selectedTopic,
  domains,
  selectedDomain,
  filteredTopics,
  selectTopic,
  selectDomain,
  initialize,
  ReviewStatusENUM,
  loading,
  goToPreviousTopic,
  goToNextTopic
} = useTopics()

// 响应式数据
const leftNav = ref(true)
const rightNav = ref(true)

// 计算当前题目索引
const currentTopicIndex = computed(() => {
  if (!selectedTopic.value) return -1
  return filteredTopics.value.findIndex(topic => topic.id === selectedTopic.value!.id)
})

// 初始化数据
onMounted(async () => {
  await initialize({ limit: -1, reviewStatus: ReviewStatusENUM.value[1].value as ReviewStatus })
})
</script>